<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>省市级联动操作</title>
</head>
<body onload="initData()">
        <div>
            <!-- this - 当前对象 - 当前选中的option标签 -->
            <select id="province" onchange="changeCity(this)">
                <option value="-1">===请您选择省份===</option>
            </select>
    
            <select id="city">
                <option value="-1">===请您选择市===</option>
            </select>
        </div>
    
        <script>
            var provinces = ["江苏省","安徽省"];
    
            var citys = [["苏州","南京","无锡","常州","徐州","盐城","宿迁","泰州","连云港","淮安"],["蚌埠","滁州","合肥","宿州","芜湖","淮南","巢湖","六安","黄山","池州","博州"]];
           
            //定义一个方法 - 用来模拟数据
            function initData(){
               
                var pro = document.getElementById("province");
                
                //遍历省份的数组
                for(var i = 0;i<provinces.length;i++){
                     //创建option标签
                    var op = document.createElement("option");
    
                    op.value = i;
                    op.innerText = provinces[i];
    
                    pro.appendChild(op);
                }
               
            }
    
            function changeCity(obj){
                //获取对应的city
                var city_arr = citys[obj.value];
    
                var city = document.getElementById("city");
                //清空city
                // city.innerHTML="";
                // city.innerHTML="<option value='-1'>===请您选择市===</option>";
    
                city.options.length = 1;//保留默认的===请您选择市===
    
    
                //遍历city_arr
                for(var i=0;i<city_arr.length;i++){
                    var opt = document.createElement("option");
    
                    opt.value = i;
                    opt.innerText = city_arr[i];
    
                    city.appendChild(opt);
                }
               
            }
        </script>
    </body>
</html>